<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .top-nav
        {
            font-size: 12px;
            font-weight: bold;
            list-style: none;
            overflow: auto;
        }
        .top-nav li
        {
            float: left;
            margin-right: 1px;
        }
        .top-nav li a
        {
            line-height: 34px;
            text-decoration: none;
            background: #3F240e;
            color: #fff;
            display: block;
            width: 80px;
            text-align: center;
        }
        .top-nav ul{
            list-style: none;
            display: none;
            padding: 0;
            position: absolute;
            height:0;
            overflow: hidden;
        }
        .top-nav li a:hover{
           background:url(slide-pannel_14.png) 0 0 repeat-x; 
        }
        .note{
            color: #3f240e;
            display: block;
            background:url(slide-pannel_14.png) 0 0 repeat-x;
        }
        .corner{height: 11px;display: block;
            background:url(bird.png) 31px 0 no-repeat;
        }
        </style>
        <!-- <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            $(".top-nav li").mousemove(function(){
                $(this).find("ul").slideDown("1000");
            });
            $(".top-nav li").mouseleave(function(){
                $(this).find("ul").slideUp("1000");
            });
        });
        </script> -->
        <script type="text/javascript">
        window.onload=function(){
            var Lis=document.getElementsByTagName("li");
            for (var i = 0; i <Lis.length ; i++) {
                Lis[i].onmouseover=function(){
                    var u=this.getElementsByTagName("ul")[0];
                   if(u!=undefined){ 
                    u.style.display='block';
                    changeH(u.id,1);
                   }
                }
                Lis[i].onmouseleave=function(){
                    var u=this.getElementsByTagName("ul")[0];
                    if(u!=undefined){ 
                    changeH(u.id,-1);
                }
                }
            };
        }
        // function AddH(id){
        //     var ulList=document.getElementById(id);
        //     var h=ulList.offsetHeight;
        //     h+=1;
        //     if(h<=42){
        //         ulList.style.height=h+"px";
        //        setTimeout("AddH('"+id+"')",10); 
        //     }else{
        //         return;
        //     }
            
        // }
        // function SubH(id){
        //     var ulList=document.getElementById(id);
        //     var h=ulList.offsetHeight;
        //     h-=1;
        //     if(h>0){
        //         ulList.style.height=h+"px";
        //         setTimeout("SubH('"+id+"')",10); 
        //     }else{
        //         ulList.style.display="none";
        //         return;
        //     }
        
        // }
        function changeH(id,count){
            var ulList=document.getElementById(id);
            var h=ulList.offsetHeight;
            h+=count;
            if(count>0){
                if(h<=42){
                ulList.style.height=h+"px";
               setTimeout("changeH('"+id+"',1)",10); 
            }else{
                return;
            }
            }else{
               if(h>0){
                ulList.style.height=h+"px";
                setTimeout("changeH('"+id+"',-1)",10); 
            }else{
                ulList.style.display="none";
                return;
            } 
            }
        }
        </script>
</head>
<body>
    <ul class="top-nav">
    <li><a href=""><span class="note">网站首页</span> </a></li>
    <li><a href="">课程大厅</a></li>
    <li><a href="">学习中心+</a>
    <ul id="mnuUL">
        <span class="corner"></span>
        <li><a href="">前端课程+</a>
            <!-- <ul>
                <li><a href="">javascript</a></li>
                <li><a href="">css</a></li>
                <li><a href="">jquery</a></li>
            </ul> -->
        </li>
        <li><a href="">后端编程</a></li>
        <li><a href="">手机开发+</a>
          <!--   <ul>
                <li><a href="">IOS</a></li>
                <li><a href="">安卓</a></li>
            </ul> -->
        </li>
    </ul>
    </li>
    <li><a href="">经典案例</a></li>
</ul>
</body>
</html>